<template>
	<view class="big-box flex-col align-center"
		:style="{background: 'url('+cardBg+')  no-repeat center center',backgroundSize:'cover'}">

		<u-toast ref="uToast"></u-toast>
		<!-- 我的baby -->
		<view class="weixin" v-if="weixinShow">
			点击右上角 [...]
			<view class="">
				在游览器打开下载APP
			</view>
			<view class="hand">
				<image class="hand-icon" src="/static/images/down/hand.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="main-info flex-col align-center">
			<!-- <image class="logo" src="/static/images/down/logo.png" mode=""></image>
			<image class="title" src="/static/images/down/title.svg" mode=""></image> -->
			<image class="logo" :src="oreInfo.icon" mode=""></image>
			<view class="title-name" v-if="code">
				{{oreInfo.name}}
			</view>
			<image v-if="!code" class="title" :src="oreInfo.name" mode=""></image>
			<view class="interpretation">
				<!-- 打造数字时代的潮玩收藏、潮玩游戏、潮玩社交 -->
				{{oreInfo.desc}}
			</view>
		</view>
		<view class="btn justify-center align-center" @tap="submit">
			<image class="download-icon" src="/static/images/down/download-icon.svg" mode=""></image>
			点击下载
		</view>
	</view>
</template>

<script>
	import {
		geTel
	} from '@/utils/libs.js'
	import validate from 'common/js/validate.js';
	export default {
		components: {
			// 注册组件
		},
		data() {
			return {
				weixinShow: false,
				androidUrl: '',
				cardBg: '/static/images/down/down.jpg',
				confirmShow: false, //确认赠送弹窗
				value: 1,
				infoInputShow: false, //密码弹窗
				pay_password: '',
				current: 0,
				to_code: '',
				oreInfo: {},
				form: {
					mobile: null, //	否	string	手机号
					smscode: null, //	否	string	短信码
					nickname: null, //	否	string	昵称
					airline_id: null, //	否	string	航司ID
					position: null, //	否	string	职务
					identity: null, //	否	string	证件照
					name: null, //	否	string	证件照
					gender: '请选择',

				},
				genderIsShow: false,
				genderList: [
					['男', '女']
				],
				moneyShow: false,
				realName: false, //是否实名
				userInfo: {},
				isSearch: false,
				code: '',
				openLocation: null,

			}
		},
		onLoad(o) {
			if (o.i) {
				this.code = o.i
			}
			this.getCardInfo()
			this.getAppInfo()
		},
		onShow() {
			this.openLocation = this.isOpenMode()
		},
		computed: {
			disable() {
				return this.payAll > parseFloat(this.oreInfo.crystal)
			},
			payAll() {
				return (Number(this.value) + (Number(this.value) * parseFloat(this.oreInfo.fee))).toFixed(2)
			},
		},
		methods: {
			geTel, //手机号脱敏

			// 下载信息
			async getCardInfo() {
				let url = '/api/v1/download'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					i: this.code
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.oreInfo = data
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			/**
			 * 登录验证
			 * @param {Object} data
			 */

			async getAppInfo() {
				const res = await uni.$postRequest('/api/v1/version')
				if (res.code == 200) {
					let {
						code,
						desc,
						download,
						is_forced_update
					} = res.data
					this.androidUrl = download
					// this.nextVersion = code
					// // this.nextVersion = '1.0.1'
					// this.content = desc
					// this.forceable = is_forced_update
					// this.$store.state.newVersion = code
				} else {
					uni.showToast({
						title: '获取安装包失败'
					})
				}
			},
			isOpenMode() {
				//平台、设备和操作系统
				var system = {
					win: false,
					mac: false,
					xll: false,
					ipad: false
				};
				//检测平台
				var p = navigator.platform;
				system.win = p.indexOf("Win") == 0;
				system.mac = p.indexOf("Mac") == 0;
				system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
				system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
				//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面
				if (system.win || system.mac || system.xll || system.ipad) {
					var ua = navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						// alert("在PC端微信上打开的");
						return 2;
					} else {
						// alert("在PC端非微信上打开的");
						return 3;
					}
				} else {
					var ua = navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						// alert("在手机端微信上打开的");
						return 1;
					} else {
						// alert("在手机上非微信上打开的");
						return 4;
					}
				}
			},

			async submit() {
				if (this.openLocation == 1) {
					this.weixinShow = true
				} else {
					window.location.href=this.androidUrl;
					// window.location.href = 'http://www.baidu.com';
				}
				return
				console.log("this.value: ", this.value);
				let form = {
					to_code: this.to_code,
					number: this.value
				}
				if (!this.verify(form)) return
				if (!this.confirmShow) {
					this.confirmShow = true
					return
				}
				let url = '/api/v1/crystal_transfer'
				let {
					code,
					msg,
					data
				} = await this.$postRequest(url, {
					to_code: this.to_code,
					number: this.value,
					pay_password: this.pay_password
				})
				if (code == 200) {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161E;
		padding: 0 48rpx 60rpx;
		min-height: 100vh;

		.weixin {
			width: calc(100vw - 206rpx);
			padding: 20rpx;
			border-radius: 20rpx;
			line-height: 1.5;
			background: #ffffff99;
			position: fixed;
			top: 50rpx;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 1;
			font-weight: 700;

			.hand-icon {
				position: absolute;
				top: -24rpx;
				right: -40rpx;
				width: 100rpx;
			}
		}

		.main-info {
			margin-top: 134rpx;

			.title {
				width: 242rpx;
				height: 54rpx;
				margin: 32rpx 0;
			}

			.title-name {
				font-weight: bold;
				margin: 32rpx 0;
				color: #FFF;
			}

			.interpretation {
				color: #FFFFFFCC;
				font-size: 24rpx;
			}
		}

		.logo {
			width: 140rpx;
			height: 140rpx;
			border-radius: 16rpx;

		}

		.btn {
			margin-top: 60rpx;
			height: 90rpx;
			width: calc(100vw - 96rpx);
			border-radius: 8rpx;
			bottom: 45rpx;
			font-weight: 700;
			font-size: 30rpx;
			background: linear-gradient(112deg, #FFF4C9 0%, #F4DA8A 100%);
			color: #000;

			.download-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>